<script setup lang="ts">

</script>

<template>
    <div style="height: 1.2963rem; width: 100%">
    <header>
      <router-link class="header-logo" to="/"></router-link>
      <div class="header-nav">
        <ul class="header-nav-list">
          <li>
            <a class="header-nav-item"> 人才招聘 </a>
          </li>
          <li v-show="!is_login">
            <router-link class="header-nav-item" to="/register"
              >新用户注册</router-link
            >
          </li>
          <li>
            <a class="header-nav-item" @click="$router.push('/home')">
              我的主页
            </a>
          </li>
          <li v-if="is_login">
            <el-dropdown>
              <div class="drop-down-content">
                <span>{{ phone }}</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <span @click="logout">注销</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
      </div>
    </header>
  </div>
</template>


<style lang="scss" scoped>
//导航
header {
  // background-image: url("../assets/header/bg.png");
  //   background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  background: white;
  background-position: bottom;
  background-repeat: repeat no-repeat;
  background-size: auto cover;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  // background-image: linear-gradient(to bottom,rgba(70, 208, 127, 0.8),rgba(70, 208, 127, 0));

  .drop-down-content {
    color: black;
    cursor: pointer;
  }
}

.header-logo {
//   background-image: url("../../assets/logo/logo.png");
  display: inline-block;
  width: 4.6296rem;
  height: 1.2963rem;
  line-height: 1.2963rem;
  margin: 0 0.1042rem;
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: top;
  background-position: center center;
}

.header-nav {
  float: right;
}

.header-nav-list {
  margin: 0 0.2083rem;
  list-style-type: none;
  margin-block: auto;
  padding-inline: 0;
  height: 1.2963rem;
}

li {
  list-style: none;
  display: inline-block;
  line-height: 1.2963rem;
  margin: 0 0.2083rem;
  font-size: 0.2963rem;
  vertical-align: top;
  font-weight: bold;
  color: white;
  .header-nav-item {
    color: black;
    transition: color 0.25s;
    text-decoration: none;
    cursor: pointer;
    &:hover {
      color: #46d07f;
      border-bottom: #46d07f 3px solid;
    }
  }
}
/deep/ .el-dropdown-menu__item {
  list-style: none;
  line-height: 36px;
  padding: 0 20px;
  margin: 0;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  outline: 0;
}
</style>

